<template>
    <custom-page-box>
        <div class="container" :class="{ active: activeKey === '1' }">
            <a-tabs v-model="activeKey">
                <a-tab-pane key="1" tab="公司资料">
                    <CompanyData :forceRender="true" @fullInfo="fullInfo" />
                </a-tab-pane>
                <a-tab-pane key="2" tab="资质证书">
                    <CompanyCredit />
                </a-tab-pane>
                <a-tab-pane key="3" tab="专家人才">
                    <CompanyTeam />
                </a-tab-pane>
            </a-tabs>
        </div>
        <div class="right" v-if="activeKey === '1'">
            <h4>认证信息</h4>
            <div>
                <p>
                    <span>营业执照</span>
                    <img :src="$staticUrl + authInfo.licensePicture" @click="imgshow(authInfo.licensePicture)" alt="" />
                </p>
                <p>
                    <span>专注领域</span><font>{{ typeList.join(',') }}</font>
                </p>
                <p>
                    <span>年营收</span><font>
                        {{ authInfo.income }}
                    </font>
                </p>
            </div>
        </div>
    </custom-page-box>
</template>

<script>
import CompanyData from '@/components/company-mange/company-data.vue'
import CompanyCredit from '@/components/company-mange/company-credit.vue'
import CompanyTeam from '@/components/company-mange/company-team.vue'
export default {
    components: {
        CompanyData,
        CompanyCredit,
        CompanyTeam
    },
    beforeRouteLeave (to, from, next) {
        if (to.name === 'success-case' || to.name === 'service-manage') {
            const self = this
            if (this.full === '1') {
                this.$confirm({
                    title: '提示',
                    content: '请先完善公司资料',
                    okText: '好的',
                    okType: 'primary',
                    onOk () {
                        self.activeKey = '1'
                        next(false)
                    },
                    onCancel () {
                        self.activeKey = '1'
                        next(false)
                    }
                })
            } else if (this.full === '2') {
                this.$confirm({
                    title: '提示',
                    content: '你填写的公司资料还没保存，请保存了之后再离开哦',
                    okText: '好的',
                    okType: 'primary',
                    onOk () {
                        self.activeKey = '1'
                        next(false)
                    },
                    onCancel () {
                        next(false)
                    }
                })
            } else if (this.full === '4') {
                this.$confirm({
                    title: '提示',
                    content: '您确定要离开当前页面吗？离开后您编辑的公司资料数据不会保存',
                    okText: '确定',
                    okType: 'primary',
                    onOk () {
                        next()
                    },
                    onCancel () {
                        next(false)
                    }
                })
            } else {
                next()
            }
        } else if (this.full === '4') {
            this.$confirm({
                title: '提示',
                content: '您确定要离开当前页面吗？离开后您编辑的公司资料数据不会保存',
                okText: '确定',
                okType: 'primary',
                onOk () {
                    next()
                },
                onCancel () {
                    next(false)
                }
            })
        } else {
            next()
        }
    },
    data () {
        return {
            activeKey: '1',
            renderKey: 0,
            authInfo: {},
            typeList: [],
            full: true
        }
    },
    mounted () {
        this.getCompanyAuth()
        if (sessionStorage.getItem('activeKey')) {
            this.activeKey = sessionStorage.getItem('activeKey')
            sessionStorage.removeItem('activeKey')
        }
        const { activeKey } = this.$route.query
        if (activeKey) {
            this.activeKey = activeKey
        }
    },
    destroyed () {
        if (sessionStorage.getItem('activeKey')) {
            sessionStorage.removeItem('activeKey')
        }
    },
    methods: {
        async getCompanyAuth () {
            const res = await this.$ApiServer['company/mange/detail']()
            const list = await this.getType()
            if (res.code === 200) {
                this.authInfo = res.data
                list.forEach((item) => {
                    this.authInfo.primaryBusinessType.split(',').forEach((subItem) => {
                        if (item.id === subItem) {
                            this.typeList.push(item.name)
                        }
                    })
                })
            }
        },
        async getType () {
            const res = await this.$ApiServer['company/tree']()
            if (res.code === 200) {
                return res.data.filter(item => item.status)
            }
        },
        imgshow (url) {
            if (url.length) {
                const urls = url.split(',')
                this.$picturesModal({
                    urls
                })
            }
        },
        fullInfo (data) {
            this.full = data
        }
    }
}
</script>

<style lang="less" scoped>
.page-box {
    display: flex;
    justify-content: space-between;
}
.container {
    width: 100%;
    display: flex;
    &.active {
        width: calc(65% - 0.05rem) !important;
    }
    .ant-tabs {
        width: 100%;
        border-radius: 6px 6px 0 0;
        ::v-deep {
            .ant-tabs-nav-container {
                padding-left: 0.2rem;
            }
            .ant-tabs-top-bar {
                background-color: #fff;
                margin: 0;
            }
            .ant-tabs-top-content {
                height: calc(100% - 0.44rem);
            }
            .ant-tabs-tab {
                color: #2a2a2a;
                &.ant-tabs-tab-active {
                    color: @primary-color !important;
                }
            }
        }
    }
}
.right {
    width: calc(35% - 0.05rem);
    background-color: #fff;
    border-radius: 6px;
    h4 {
        height: 0.44rem;
        border-bottom: 1px solid #e8e8e8;
        line-height: 0.44rem;
        padding-left: 0.2rem;
        color: #2a2a2a;
    }
    div {
        padding-left: 0rem;
        padding-top: 0.2rem;
        p {
            display: flex;
            font-size: 0.14rem;
            & + p {
                margin-top: 0.3rem;
                span {
                    line-height: 32px;
                }
            }
            span {
                color: #2a2a2a;
                width: 120px;
                text-align: right;
                margin-right: 30px;
            }
            font {
                color: #666;
                font-size: 14px;
                display: inline-block;
                height: 32px;
                border: 1px solid #ccc;
                border-radius: 4px;
                line-height: 32px;
                padding: 0 10px;
            }
            img {
                width: 2.03rem;
                height: 1.5rem;
                border-radius: 0.04rem;
                cursor: pointer;
                & + img {
                    margin-left: 0.2rem;
                }
            }
        }
    }
}
</style>
